<template>
  <div class="audit">
    <el-row class="auditButton">
      <!-- <el-button
        :size="size"
        v-for="(item, index) in buttonOption"
        :key="index"
        :plain="status !== item.status"
        :type="item.type"
        @click="handleViewed(item.status)">{{item.name}} ({{item.number}})</el-button> -->
      <el-button :size="size" type="warning">待处理</el-button>
      <el-button :size="size" type="success">已排除</el-button>
      <el-button
        :size="size"
        @click="handleShowForm">更多条件</el-button>
    </el-row>
    <el-row>
      <!-- 左侧条件筛查部分 -->
      <el-col>
        <el-form
          v-if="isShow"
          :size="size"
          ref="form"
          :model="form"
          label-width="70px"
          inline
          class="auditForm">
          <el-form-item>
            <el-date-picker
              style="width: 190px;"
              v-model="form.startTime"
              type="date"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
              placeholder="请选择开始日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>至</el-form-item>
          <el-form-item>
            <el-date-picker
              style="width: 190px;"
              v-model="form.endTime"
              type="date"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
              placeholder="请选择结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-select v-model="form.depart"
              placeholder="请选择科室"
              clearable>
              <el-option
                v-for="item in departOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="form.source"
              placeholder="请选择来源"
              clearable>
              <el-option
                v-for="item in sourceOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item><el-form-item>
            <el-select v-model="form.basis"
              placeholder="请选择诊断依据"
              clearable>
              <el-option
                v-for="item in basisOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          </el-form-item><el-form-item>
            <el-select v-model="form.status"
              placeholder="请选择状态"
              clearable>
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-button
            :size="size"
            class="button"
            type="primary"
            icon="el-icon-search"
            @click="handleQueryReportView('search')">查询</el-button>
          <!-- <el-button class="button" @click="handleExport">导出</el-button> -->
        </el-form>
      </el-col>
      <el-col>
        <cs-table :table-data="tableData"
                  :table-label="tableLabel"
                  @handleButton="handleButton"
                  :maxHeight="500"
                  :loading="loading"
                  :isSelection="isSelection"
                  :table-option="tableOption">
          <template slot="auditStatus" slot-scope="scope">
            <el-tag v-if="scope.row.auditStatus === 1" :size="size">未审核</el-tag>
            <el-tag v-if="scope.row.auditStatus === 2" :size="size" type="success">已审核</el-tag>
            <el-tag v-if="scope.row.auditStatus === 3" :size="size" type="success">已上报</el-tag>
            <el-tag v-if="scope.row.auditStatus === 4" :size="size" type="warning">未上报</el-tag>
            <el-tag v-if="scope.row.auditStatus === 5" :size="size" type="warning">审核未通过</el-tag>
          </template>
          <template slot="zyidType" slot-scope="scope">
            <el-tag
              :size="size"
              effect="plain"
              :type="scope.row.zyidType === 1 ? '' : 'success'">
              {{scope.row.zyidType === 1 ? '门诊' : '住院'}}</el-tag>
          </template>
        </cs-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[20, 30, 40, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          style="text-align: right;">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CsTable from '@/components/cs-table'
import { hasPermission } from '@/permission/index.js'
export default {
  data () {
    return {
      isShow: false,
      size: window.SITE_CONFIG.tableSize,
      // 按钮循环数据
      buttonOption: [],
      status: '1',
      form: {
        startTime: '',
        endTime: '',
        depart: '',
        source: '',
        basis: '',
        status: ''
      },
      departOptions: [],
      sourceOptions: [],
      basisOptions: [],
      statusOptions: [],
      loading: false,
      isSelection: false,
      pageNo: 1,
      pageSize: 20,
      total: 0,
      tableData: [],
      tableLabel: [
        { label: '状态', param: 'auditStatus', align: 'center', sortable: false, isShow: true, slot: true },
        { label: '姓名', param: 'patientname', align: 'center', sortable: false, isShow: true },
        { label: '传染病名', param: 'disease', align: 'center', sortable: false, isShow: true },
        { label: '科室', param: 'depart', align: 'center', sortable: false, isShow: true },
        { label: '类型', param: 'zyidType', align: 'center', sortable: false, isShow: true, slot: true },
        { label: '住院/门诊号', param: 'zyid', align: 'center', sortable: false, isShow: true },
        { label: '报告时间', param: 'createTime', align: 'center', sortable: false, isShow: true }
      ],
      tableOption: {
        label: '操作',
        width: '350',
        options: [
          { label: '查看', type: '', icon: 'el-icon-view', methods: 'view', auth: 'sys:user:view' },
          { label: '编辑', type: 'warning', icon: 'el-icon-edit', methods: 'edit', auth: 'sys:user:update', isShow: true, state: '2,3', stateName: 'auditStatus' },
          { label: '审核', type: 'primary', icon: 'el-icon-s-order', methods: 'audit', auth: 'sys:user:audit', isShow: true, state: '2,3', stateName: 'auditStatus' },
          { label: '删除', type: 'danger', icon: 'el-icon-delete', methods: 'delete', auth: 'sys:user:delete' }
        ]
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() >= Date.now() - 8.64e6
        }
      }
    }
  },
  components: {
    CsTable
  },
  created() {
    // this.handleQueryReportView()
  },
  watch: {
    // 监控页面总数的变化，解决第二页的信息只有一条数据时，进行删除后，页面跳转至第一页，但没有将第一页的数据展示出来
    total(){  // 注意这个函数的名字必须和你监听data中的属性的名字一样，这样才能当你data中的属性发生变化时，触发这个函数
      if(this.total === ((this.pageNo - 1) * this.pageSize) && this.total!=0){ // 这一行是关键代码，倍数关系
          this.pageNo -= 1
          this.handleQueryReportView() // 获取表格数据的方法
      }
    }
  },
  methods: {
    // 导出按钮
    // handleExport() {
    //   console.log('导出文件')
    // },
    // 控制顶部条件显示与隐藏
    handleShowForm() {
      // 每次打开前，清空数据
      this.form.type = ''
      this.form.startTime = ''
      this.form.endTime = ''
      this.form.depart = ''
      this.form.cases = ''
      this.form.diseases = ''
      this.isShow = !this.isShow
    },
    // 头部按钮切换
    handleViewed(val) {
      this.status = val
      // this.handleQueryReportView()
    },
    // // 查询全部数据
    handleQueryReportView(method) {
      if (method === 'search') {
        this.pageRequest.pageNo = 1
      }
    //   if (this.form.startTime > this.form.endTime) {
    //     this.$message.warning("结束日期不能小于开始日期")
    //   } else {
    //     const { type, startTime, endTime, depart, cases, diseases } = this.form
    //     const { status, pageNo, pageSize } = this
    //     const data = { type, startTime, endTime, depart, cases, diseases, status, pageNo, pageSize }
    //     queryReportView(data).then((res) => {
    //       if (res.code === 200) {
    //         this.tableData = res.data.pageResult.rows
    //         this.total = res.data.pageResult.totalRows
    //         // 上面5个显示数据
    //         this.buttonOption = res.data.hpStatusVoList
    //       }
    //     })
    //   }
    },
    // // 表格操作栏按钮
    handleButton(methods, row, index) {
      if (methods.methods === 'view') {
        this.handleView(methods.row.id)
      } else if (methods.methods === 'edit') {
        this.handleEdit(methods.row.id)
      } else if (methods.methods === 'audit') {
        this.handleAudit(methods.row.id)
      } else if (methods.methods === 'delete') {
        this.handleDelete(methods.row.id)
      }
    },
    // // 表格操作栏查看
    // handleView(val) {
    // },
    // // 表格操作栏编辑
    // handleEdit(val) {
    // },
    // // 表格操作栏审核
    // handleAudit(id) {
    // },
    // // 表格操作栏删除
    handleDelete(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
      }).catch(() => {
      })
    },
    // // 表格分页参数
    handleSizeChange(newSize) {
      this.pageSize = newSize
      // this.handleQueryReportView()
    },
    handleCurrentChange(newPage) {
      this.pageNo = newPage
      // this.handleQueryReportView()
    },
    hasPerms: function (perms) {
      // 根据权限标识和外部指示状态进行权限判断
      // return true
      return hasPermission(perms) & !this.disabled
    }
  }
}
</script>

<style scoped>
  .audit {
    padding: 10px;
    text-align: left !important;
  }
  .auditButton {
    margin-bottom: 20px;
  }
  .el-select, .el-input {
    width: 200px !important;
  }
  .el-pagination {
    margin-top: 10px;
  }
</style>
